<jsp:include page="../includes/header.jsp" />

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<sec:authentication property="name" var="userName" />
<c:set var="webContext" value="${pageContext.request.contextPath}" />
<c:set var="ipServer" value="192.168.1.149" />
<style>
video {
	display: none;
}
</style>
<section class="title">
	<div class="container">
		<div class="row-fluid">
			<div class="span6">
				<h1>Transmitir Clase Online</h1>
			</div>
			<div class="span6">
				<ul class="breadcrumb pull-right">
					<li><a href="/">Home</a> <span class="divider">/</span></li>
					<li class="active">Clase Online</li>
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- / .title -->

<section id="realidad-aumentada" class="container">
	<div class="container .text-center">

<div class="col-md-7">
<div class="row">
<h1>Clase Online - Instructor</h1>
<div id="videoscreen">
<img id="remoteImage" >
</div>
</div>
<!-- <div class="row"> -->
<!-- <form class="form-inline" role="form" id="configForm"> -->
<!-- <label class="radio-inline"> -->
<!--   <input type="radio" id="qvga" value="320" name="size"> 320 x 420 -->
<!-- </label> -->
<!-- <label class="radio-inline"> -->
<!--   <input type="radio" id="vga" value="640" name="size"> 640 x 480 -->
<!-- </label> -->
<!-- <label class="radio-inline"> -->
<!--   <input type="radio" id="hd" value="1280" name="size"> 1280 x 720 -->
<!-- </label> -->
<!-- </form> -->
<!-- </div> -->
<div class="row">
<form class="form-inline" role="form">
<button id="start" type="button" class="btn btn-sucess btn-lg">
  <span class="label label-success">Iniciar Clase</span> 
</button>
<button id="stop" type="button" class="btn btn-sucess btn-lg">
  <span class="label label-important">Terminar Clase</span> 
</button>
<!-- <div class="checkbox"> -->
<!--     <label> -->
<!--       <input type="checkbox" checked id="camselector"> View own camera -->
<!--     </label> -->
<!--   </div> -->
</form>
</div>
</div>
<div class="col-md-5" id="side">
<div class="row">
<div id="mycam">
<img id="myvision">
</div>
</div>
</div>
</div>

<div class="well" id="well-instructor">
<video></video>
<canvas id='recCanvas'></canvas>
</div>

<div class="well" id="well-chat-instructor">
	<form>
		<div class="chat">
			<input type="text" class="chat-name" readonly="readonly" value="${userName}" />
			<div class="chat-messages">
	
			</div>
			<textarea class="chat-textarea" placeholder="Escribe un mensaje"></textarea>
<!-- 			<div class="chat-status">Estado: <span>Inactivo</span></div> -->
		</div>
	</form>
	<script>
	    	$(document).ready(function(){
	    		var getNode = function(s){
	    			return document.body.querySelector(s);
	    		}
	    		
	    		//status = getNode('.chat-status span');
	    		textarea = getNode('.chat textarea');
	    		chatName = getNode('.chat-name');
	    		
	    		statusDefault = $(".chat-status span").text();
	    		
	    		var setStatus = function(s){
	    			$(".chat-status span").text(s);
	    			
	    			if(s !== statusDefault){
	    				var delay = setTimeout(function(){
	    					setStatus(statusDefault);
	    					clearInterval(delay);
	    				}, 3000);
	    			}
	    		}
	    		
	    		try {
					var chatSocket = io.connect("http://${ipServer}:3000");
				} catch (e) {
					// TODO: handle exception
				}
				
				if(chatSocket !== undefined){
					
					chatSocket.on('output', function(data){
						$(".chat-messages").append('<li>'+data.name+': '+data.message+'</li>');
					});
					
					chatSocket.on('status', function(data){
						setStatus((typeof data === 'object') ? data.message : data);
						
						if(data.clear === true){
							textarea.value = '';
						}
					});
					
					textarea.addEventListener('keydown', function(event){
						var self = this,
							name = chatName.value;
						
						if(event.which === 13 && event.shiftKey === false){
							chatSocket.emit('input', {
								name: name,
								message: self.value
							});
							
							event.preventDefault();
						}
					});
				}
	    	});
	    </script>
</div>
<script src="http://${ipServer}:8585/socket.io/socket.io.js"></script>
</section>


<jsp:include page="../includes/footer.jsp" />